<template>
  <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-8">
    <div class="container mx-auto px-4 max-w-4xl">
      <!-- 加载状态 -->
      <div v-if="loading" class="flex justify-center items-center min-h-[60vh]">
        <div class="loader"></div>
      </div>
      
      <!-- 错误信息 -->
      <div v-else-if="error" class="text-center py-20">
        <div class="text-red-500 text-xl mb-4">{{ error }}</div>
        <router-link to="/servers" class="text-blue-600 dark:text-blue-400 hover:underline">
          返回 Server 列表
        </router-link>
      </div>

      <!-- 编辑表单 -->
      <template v-else>
        <div class="mb-8">
          <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-2">编辑MCP Server </h1>
          <p class="text-gray-600 dark:text-gray-300">
            更新 "{{ form.name }}" 的信息
          </p>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
          <form @submit.prevent="submitForm" class="p-6 space-y-6">
            <!-- 基本信息 -->
            <div>
              <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">基本信息</h2>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!--  Server 名称 -->
                <div>
                  <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                     Server 名称 *
                  </label>
                  <input
                    id="name"
                    v-model="form.name"
                    type="text"
                    required
                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                  />
                </div>

                <!-- 版本 -->
                <div>
                  <label for="version" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    版本
                  </label>
                  <input
                    id="version"
                    v-model="form.version"
                    type="text"
                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                  />
                </div>
              </div>

              <!-- 描述 -->
              <div class="mt-6">
                <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  描述 *
                </label>
                <textarea
                  id="description"
                  v-model="form.description"
                  rows="3"
                  required
                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                ></textarea>
              </div>

              <!--  Server 类型 -->
              <div class="mt-6">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                   Server 类型 *
                </label>
                <div class="flex space-x-4">
                  <div class="flex items-center">
                    <input
                      id="type-public"
                      v-model="form.isInternal"
                      :value="false"
                      type="radio"
                      name="server-type"
                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"
                    />
                    <label for="type-public" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
                      开源 Server 
                    </label>
                  </div>
                  <div class="flex items-center">
                    <input
                      id="type-internal"
                      v-model="form.isInternal"
                      :value="true"
                      type="radio"
                      name="server-type"
                      class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"
                    />
                    <label for="type-internal" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
                      企业内部 Server 
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <!-- 技术信息 -->
            <div class="pt-6 border-t border-gray-200 dark:border-gray-700">
              <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">技术信息</h2>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 开发语言 -->
                <div>
                  <label for="language" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    开发语言
                  </label>
                  <select
                    id="language"
                    v-model="form.language"
                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                  >
                    <option value="">选择语言</option>
                    <option value="Python">Python</option>
                    <option value="JavaScript">JavaScript</option>
                    <option value="TypeScript">TypeScript</option>
                    <option value="Java">Java</option>
                    <option value="Go">Go</option>
                    <option value="C++">C++</option>
                    <option value="Rust">Rust</option>
                    <option value="C#">C#</option>
                    <option value="其他">其他</option>
                  </select>
                </div>

                <!-- 鉴权方式 -->
                <div>
                  <label for="authType" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    鉴权方式
                  </label>
                  <select
                    id="authType"
                    v-model="form.authType"
                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                  >
                    <option value="">选择鉴权方式</option>
                    <option value="API Key">API Key</option>
                    <option value="OAuth">OAuth</option>
                    <option value="JWT">JWT</option>
                    <option value="无需鉴权">无需鉴权</option>
                    <option value="其他">其他</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- 安装命令 -->
            <div class="pt-6 border-t border-gray-200 dark:border-gray-700">
              <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white">安装命令</h2>
                <button 
                  type="button"
                  @click="addInstallCommand"
                  class="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
                >
                  <svg class="w-5 h-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
                  </svg>
                  添加命令
                </button>
              </div>
              
              <div v-if="form.installCommands.length === 0" class="text-center py-4 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-700 rounded-md">
                点击"添加命令"按钮添加安装命令
              </div>
              
              <div v-else class="space-y-4">
                <div 
                  v-for="(cmd, index) in form.installCommands" 
                  :key="index"
                  class="border border-gray-200 dark:border-gray-700 rounded-md p-4"
                >
                  <div class="flex justify-between items-start mb-2">
                    <h3 class="font-medium text-gray-900 dark:text-white">安装命令 #{{ index + 1 }}</h3>
                    <button 
                      type="button" 
                      @click="removeInstallCommand(index)"
                      class="text-red-500 hover:text-red-700"
                    >
                      <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                      </svg>
                    </button>
                  </div>
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label :for="`cmd-name-${index}`" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        名称
                      </label>
                      <input
                        :id="`cmd-name-${index}`"
                        v-model="cmd.name"
                        type="text"
                        placeholder="例如：pip安装、Docker安装等"
                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                      />
                    </div>
                    <div>
                      <label :for="`cmd-command-${index}`" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        命令
                      </label>
                      <input
                        :id="`cmd-command-${index}`"
                        v-model="cmd.command"
                        type="text"
                        placeholder="输入安装命令"
                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 配置选项 -->
            <div class="pt-6 border-t border-gray-200 dark:border-gray-700">
              <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white">配置选项</h2>
                <button 
                  type="button"
                  @click="addConfigOption"
                  class="text-sm flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
                >
                  <svg class="w-5 h-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
                  </svg>
                  添加配置
                </button>
              </div>
              
              <div v-if="form.configOptions.length === 0" class="text-center py-4 text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-700 rounded-md">
                点击"添加配置"按钮添加JSON配置选项
              </div>
              
              <div v-else class="space-y-4">
                <div 
                  v-for="(config, index) in form.configOptions" 
                  :key="index"
                  class="border border-gray-200 dark:border-gray-700 rounded-md p-4"
                >
                  <div class="flex justify-between items-start mb-2">
                    <h3 class="font-medium text-gray-900 dark:text-white">配置选项 #{{ index + 1 }}</h3>
                    <button 
                      type="button" 
                      @click="removeConfigOption(index)"
                      class="text-red-500 hover:text-red-700"
                    >
                      <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                      </svg>
                    </button>
                  </div>
                  <div>
                    <label :for="`config-name-${index}`" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                      名称
                    </label>
                    <input
                      :id="`config-name-${index}`"
                      v-model="config.name"
                      type="text"
                      placeholder="例如：基础配置、高级配置等"
                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                    />
                  </div>
                  <div class="mt-3">
                    <label :for="`config-json-${index}`" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                      JSON配置
                    </label>
                    <textarea
                      :id="`config-json-${index}`"
                      v-model="config.json"
                      rows="4"
                      placeholder='{"key": "value"}'
                      class="w-full px-3 py-2 font-mono text-sm border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                    ></textarea>
                  </div>
                  <div class="mt-3">
                    <label :for="`config-desc-${index}`" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                      描述
                    </label>
                    <input
                      :id="`config-desc-${index}`"
                      v-model="config.description"
                      type="text"
                      placeholder="配置的简要说明"
                      class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                    />
                  </div>
                </div>
              </div>
            </div>

            <!-- README -->
            <div class="pt-6 border-t border-gray-200 dark:border-gray-700">
              <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">README文档</h2>
              <div>
                <label for="readme" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  README内容 (Markdown格式)
                </label>
                <textarea
                  id="readme"
                  v-model="form.readme"
                  rows="8"
                  class="w-full px-3 py-2 font-mono text-sm border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                ></textarea>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                  支持Markdown格式，可以添加标题、列表、代码等
                </p>
              </div>
            </div>

            <!-- 安装指南 -->
            <div class="pt-6 border-t border-gray-200 dark:border-gray-700">
              <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">安装指南</h2>
              <div>
                <label for="installationGuide" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                  安装指南内容 (Markdown格式)
                </label>
                <textarea
                  id="installationGuide"
                  v-model="form.installationGuide"
                  rows="6"
                  class="w-full px-3 py-2 font-mono text-sm border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                ></textarea>
              </div>
            </div>

            <!-- 删除 Server  -->
            <div class="pt-6 border-t border-gray-200 dark:border-gray-700">
              <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md p-4">
                <div class="flex">
                  <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                    </svg>
                  </div>
                  <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800 dark:text-red-200">
                      危险操作
                    </h3>
                    <div class="mt-2 text-sm text-red-700 dark:text-red-300">
                      <p>
                        删除操作无法撤销，删除后 Server 的所有数据将永久丢失。
                      </p>
                    </div>
                    <div class="mt-4">
                      <button 
                        type="button" 
                        @click="confirmDelete"
                        class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 dark:text-red-100 dark:bg-red-800 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
                      >
                        删除此 Server 
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 提交按钮 -->
            <div class="pt-6 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-4">
              <router-link 
                :to="`/servers/${id}`" 
                class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
              >
                取消
              </router-link>
              <button 
                type="submit"
                class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                :disabled="loading || submitting"
              >
                <span v-if="submitting" class="flex items-center">
                  <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                  保存中...
                </span>
                <span v-else>保存更改</span>
              </button>
            </div>
          </form>
        </div>
      </template>
    </div>
    
    <!-- 删除确认对话框 -->
    <div 
      v-if="showDeleteConfirm" 
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
    >
      <div class="bg-white dark:bg-gray-800 rounded-lg max-w-md w-full p-6 shadow-xl">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">
          确认删除
        </h3>
        <p class="text-gray-700 dark:text-gray-300 mb-6">
          您确定要删除 "{{ form.name }}" 吗？此操作无法撤销！
        </p>
        <div class="flex justify-end space-x-3">
          <button 
            type="button"
            @click="showDeleteConfirm = false"
            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
          >
            取消
          </button>
          <button 
            type="button"
            @click="deleteServer"
            class="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
            :disabled="deleting"
          >
            <span v-if="deleting" class="flex items-center">
              <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
              删除中...
            </span>
            <span v-else>确认删除</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import { getServerById, updateServer, deleteServer } from '@/api/server'

const route = useRoute()
const router = useRouter()
const id = ref(route.params.id as string)

const loading = ref(true)
const error = ref<string | null>(null)
const submitting = ref(false)
const showDeleteConfirm = ref(false)
const deleting = ref(false)

// 表单数据
const form = reactive({
  name: '',
  name_cn: '',
  icon: '',
  provider: '',
  description: '',
  description_cn: '',
  category: [] as string[],
  category_cn: [] as string[],
  tags: [] as string[],
  is_official: false,
  is_internal: false,
  auth_method: '',
  dev_language: '',
  from_site: '',
  from_site_url: '',
  internal_doc_url: '',
  server_config: '',
  env_schema: {} as Record<string, any>,
  tools: [] as any[],
  readme: '',
  readme_cn: '',
  verified: false,
  // 向后兼容旧的字段名
  version: '',
  isInternal: false,
  language: '',
  authType: '',
  installCommands: [] as { name: string; command: string }[],
  configOptions: [] as { name: string; json: string; description: string }[],
  installationGuide: ''
})

// 获取服务器详情
const fetchServerDetails = async () => {
  loading.value = true
  error.value = null
  
  try {
    const server = await getServerById(id.value)
    
    // 更新表单数据
    form.name = server.name
    form.name_cn = server.name_cn || ''
    form.icon = server.icon || ''
    form.provider = server.provider || ''
    form.description = server.description
    form.description_cn = server.description_cn || ''
    form.category = server.category || []
    form.category_cn = server.category_cn || []
    form.tags = server.tags || []
    form.is_official = server.is_official || false
    form.is_internal = server.is_internal || false
    form.auth_method = server.auth_method || ''
    form.language = server.language || []
    form.from_site = server.from_site || ''
    form.from_site_url = server.from_site_url || ''
    form.internal_doc_url = server.internal_doc_url || ''
    form.server_config = server.server_config || ''
    form.env_schema = server.env_schema || {}
    form.tools = server.tools || []
    form.readme = server.readme || ''
    form.readme_cn = server.readme_cn || ''
    form.verified = server.verified || false
    
  } catch (err: any) {
    console.error('获取服务器详情失败:', err)
    error.value = err.message || '获取服务器详情失败，请稍后再试'
  } finally {
    loading.value = false
  }
}

// 添加安装命令
const addInstallCommand = () => {
  form.installCommands.push({
    name: '',
    command: ''
  })
}

// 删除安装命令
const removeInstallCommand = (index: number) => {
  form.installCommands.splice(index, 1)
}

// 添加配置选项
const addConfigOption = () => {
  form.configOptions.push({
    name: '',
    json: '',
    description: ''
  })
}

// 删除配置选项
const removeConfigOption = (index: number) => {
  form.configOptions.splice(index, 1)
}

// 提交表单
const submitForm = async () => {
  loading.value = true
  error.value = null
  
  try {
    await updateServer(id.value, form)
    
    // 更新成功，跳转到详情页
    router.push(`/servers/${id.value}`)
  } catch (err: any) {
    console.error('更新失败:', err)
    error.value = err.response?.data?.message || '更新失败，请稍后再试'
    alert('更新失败: ' + error.value)
  } finally {
    loading.value = false
  }
}

// 删除服务器
const confirmDelete = async () => {
  if (!confirm(`确定要删除 "${form.name}" 吗？此操作不可撤销。`)) {
    return
  }
  
  loading.value = true
  
  try {
    await deleteServer(id.value)
    
    // 删除成功，跳转到列表页
    router.push('/servers')
  } catch (err: any) {
    console.error('删除失败:', err)
    alert('删除失败: ' + (err.response?.data?.message || '请稍后再试'))
  } finally {
    loading.value = false
  }
}

// 生命周期钩子
onMounted(() => {
  fetchServerDetails()
})
</script>

<style scoped>
.loader {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> 